<template>
	<view class="register-model">
		<view>
			<view class="logo-box">
				<view class="logo">
					<div class="img">
						<span>logo</span>
					</div>
					<div class="img-shade"></div>
				</view>
			</view>
			<view class="form-box">
				<u-input placeholder="手机号码" type="text" v-model="form.phoneNumber"></u-input>
				<div class="code-box">
					<u-input placeholder="请输入验证码" type="text" v-model="form.yzCode"></u-input>
					<!-- <button size="mini">发送验证码</button> -->
					<!-- <button size="mini" :class="[ tips!=='获取验证码' ?'text-24-808080':'']" @tap="getCode">{{tips}}</button> -->
					<text :class="[ tips!=='获取验证码' ?'text-24-808080':'']" @tap="_initSendYzCode">{{tips}}</text>

				</div>
				<u-input placeholder="请设置一个不少于6位的密码" type="password" v-model="form.password"></u-input>
				<u-input placeholder="请再次输入密码" type="password" v-model="form.twoPassword"></u-input>
				<u-button type="primary" shape="circle" @click="registerBtn">注册</u-button>
				<view class="link-box" v-if="false">
					<span class="register">注册账号</span>
					<span class="backPassword">找回密码</span>
				</view>
			</view>
		</view>

		<!-- <u-toast ref="uToast"></u-toast> -->
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
		<!-- <u-button @tap="getCode">{{tips}}</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phoneNumber: '',
					yzCode: '',
					password: '',
					twoPassword: '',
				},
				tips: '',
				// refCode: null,
				seconds: 60,
			}
		},
		onload() {
			
		},
		methods: {
			
			// 注册
			registerBtn(){
				if(this.form.password !== this.form.twoPassword){
					uni.showToast({
						title:"两次密码不一致,请重新输入",
						icon:"none"
					})
					return
				}
				this._initSendNews()
			},
			// 调用注册接口
			async _initSendNews() {
				let news = await this.$myRequest({
					url: '/rural-revitalization/sys/user/register',
					method: "POST",
					data: {
						phone: this.form.phoneNumber,
						smscode: this.form.yzCode,
						password: this.form.twoPassword
					}
				})
				console.log(news)
				if(news.code == 0){
					uni.showToast({
						title:news.message
					})
				}else{
					console.log(news)
				}
			},
			// 调用验证码接口
			async _initSendYzCode() {
				let news = await this.$myRequest({
					url: '/rural-revitalization/sys/sms',
					method: "POST",
					data: {
						mobile: this.form.phoneNumber,
						smsmode:"1"
					}
				})
				if(news.code == 0){
					// uni.showToast({
					// 	title:news.message,
					// 	icon:"none"
					// })
					this.getCode()
				}
				else if(news.code == 500){
					uni.showToast({
						title:news.message,
						icon:"none"
					})
					setTimeout(()=>{
						// let _that = this;
						console.log(this.form.phoneNumber)
						uni.redirectTo({
							url:"/pages/login/login?phoneNumber="+this.form.phoneNumber
						})
					},500)
					// console.log(news.code)
				}else{
					uni.showToast({
						title:news.message,
						icon:"none"
					})
				}
			},


			codeChange(text) {
				this.tips = text;
			},
			odeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// this._initSendYzCode();
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('验证码已发送');
			}
		}
	}
</script>

<style lang="scss">
	.register-model {
		position: relative;
		width: 100vw;
		// height: 70vh;
		display: flex;
		overflow-y: hidden;

		>uni-view {
			margin: auto;
		}

		.logo-box {
			width: 100vw;
			display: flex;
			padding: 20px;
			box-sizing: border-box;

			.logo {
				width: 100%;
				margin: auto;

				>div {
					width: 20vw;
					height: 20vw;
					margin: 0 auto;
					border-radius: 5px;

					&.img {
						background-color: rgba(87, 141, 230, 0.7);
						color: white;
						display: flex;

						span {
							margin: auto;
						}
					}

					&.img-shade {
						margin-top: 2px;
						background-color: unset;
						background-image: linear-gradient(rgba(87, 141, 230, 0.3), rgba(87, 141, 230, 0) 50%);
					}
				}
			}
		}

		.form-box {
			height: auto;
			padding: 20px 10vw;

			>* {
				margin: auto;
				margin-bottom: 5vh;

				&.u-input,
				&.code-box {
					border-bottom: 1px solid black;
					border-color: rgb(220, 223, 230);
				}

				&.code-box {
					display: flex;

					// padding: 20px 0px;
					>* {
						margin: auto;
					}

					uni-button {
						// width: 40%;
						height: 80%;
						font-size: 15px;
						margin: auto;
						background: none;
						color: rgba(87, 141, 230, 1);
						margin-top: -10px;

						&::after {
							border-radius: 50px;
						}
					}
				}

				&.link-box {
					margin-top: -2vh;
					justify-content: space-between;
					display: flex;

					.register {
						color: rgba(87, 141, 230, 1);
					}

				}
			}
		}
	}
</style>
